<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h2>省市区三级联动</h2>

省&nbsp;
<select  name="province" id="province" onchange="test(this.value)">
    <option value="">--请选择--</option>

</select>

市&nbsp;
<select name="city" id="city" onchange="test1(this.value)">
    <option value="">--请选择--</option>

</select>

区&nbsp;
<select name="area" id="area">
    <option value="">--请选择--</option>

</select>
<script src="js/jquery-1.8.3.js"></script>
<script>
    //ajax请求所有省的信息
    $.ajax({
        url:"PcdServlet",
        data:{"pid":0},
        dataType:"json",
        success:function (res) {
            /**
             *  [
             *      {id:v,pid:v,name:v},
             *      {id:v,pid:v,name:v},
             *
             *  ]
             *
             */

            //遍历
            for(var i=0;i<res.length;i++){
                //创建option标签对象  <option></option>
                var $option = $("<option></option>");
                //填充option标签的value属性以及显示的文本内容
                $option.attr("value",res[i].id).html(res[i].name);
                //向省的下拉列表框下填充option
                $("#province").append($option);
                }
            }
    });
</script>
<script>
    function test(values) {
        $.ajax({
            url: "PcdServlet",
            data: {"pid": values},
            dataType: "json",
            success: function (reds) {
                /**
                 *  [
                 *      {id:v,pid:v,name:v},
                 *      {id:v,pid:v,name:v},
                 *
                 *  ]
                 *
                 */

                //遍历
                $("#city").html("<option>--请选择--</option>")
                for (var i = 0; i < reds.length; i++) {
                    //创建option标签对象  <option></option>
                    var $option = $("<option></option>");
                    //填充option标签的value属性以及显示的文本内容
                    $option.attr("value", reds[i].id).html(reds[i].name);
                    //向省的下拉列表框下填充option
                    $("#city").append($option);
                }
            }
        });
    }
</script>
<script>
    function test1(values) {
        $.ajax({
            url: "PcdServlet",
            data: {"pid": values},
            dataType: "json",
            success: function (reds) {
                /**
                 *  [
                 *      {id:v,pid:v,name:v},
                 *      {id:v,pid:v,name:v},
                 *
                 *  ]
                 *
                 */

                //遍历
                $("#area").html("<option>--请选择--</option>")
                for (var i = 0; i < reds.length; i++) {
                    //创建option标签对象  <option></option>
                    var $option = $("<option></option>");
                    //填充option标签的value属性以及显示的文本内容
                    $option.attr("value", reds[i].id).html(reds[i].name);
                    //向省的下拉列表框下填充option
                    $("#area").append($option);
                }
            }
        });
    }
</script>
</body>
</html>